<%@ taglib uri="/tags/struts-bean" prefix="bean" %>
<%@ taglib uri="/tags/struts-html" prefix="html" %>
<%@ taglib uri="/tags/struts-logic" prefix="logic" %>
<script type="text/javascript" src="../js/prototype.js"></script>
<script language="JavaScript">
var examNameExist = false;

function isNameExist(){
	var examName = $('exam_name').value;
	new Ajax.Request('/isExamNameExist.do?exam_name='+examName,   
			{     method:'get',     
				  onSuccess: function(transport)
					{       
						var response = transport.responseText || "no response text";
						if(response=="TRUE"){
							examNameExist=  true;
							$('examNameId').innerHTML = "Exam name exist!"
							$('examNameId').style.display = "";	
						}else{
							examNameExist = false;
							$('examNameId').innerHTML="";
							$('examNameId').style.display = "none";	
						}
					},     
				  onFailure: function()
				    { 
						alert('Something went wrong...') 
					}   
			}
		); 
}

function availableQuestion(){
	var category = $('question_category_id_temp').value;
	var level = $('question_level_id_temp').value;
	var multipleChoice = $('multiple_choice_enable').value;
	if(category =="" || level=="" )
	{
		$('maxQuestion').value=0;
		return;
	}

	new Ajax.Request('/availableQuestions.do?category_id='+category+'&level_id='+level+'&multiple_choice_enable='+multipleChoice,   
			{     method:'get',     
				  onSuccess: function(transport)
					{       
						var response = transport.responseText || "no response text";						
						$('maxQuestion').value = response;
					},     
				  onFailure: function()
				    { 
						alert('Something went wrong...') 
					}   
			}
		); 
}
var addedQuestionArray = new Array();
var levelMarksMap = new Array();
var totalMarks = 0;
var arrayIndex = 0;
var questionRowID= 1;
function addRow(obj){
	//var div = new Element('div', { 'id': 'hierarchyRow'+hierarchyRowID,'class':'empty'});
	var content = $('questionRow').innerHTML;
	//alert(content);	
	if($('question_category_id_temp').value==""){
		alert("Please select Category");
		$('question_category_id_temp').focus();
		return;
	}
	if($('question_level_id_temp').value==""){
		alert("Please select Question Level");
		$('question_level_id_temp').focus();
		return;
	}
	var pattern = /^[1-9]([0-9]*)$/;
	if(!pattern.test($('numberOfQuestion').value))
	{
		alert("Please enter number in Question Count greater then 0");
		$('numberOfQuestion').focus();
		return;
	}
	if($('maxQuestion').value==0){
		alert("Can not be added as Max Count of available questions is Zero");
		return;
	}
	if(parseInt($('numberOfQuestion').value) > parseInt($('maxQuestion').value)){
		alert("Question count can not be greater then Available Question");
		$('numberOfQuestion').focus();
		return;
	}

	content = content.replace(/rowId/,""+questionRowID);
	content = content.replace(/categoryValue/,$('question_category_id_temp').value);
	content = content.replace(/levelValue/,$('question_level_id_temp').value);
	content = content.replace(/questionCount/,$('numberOfQuestion').value);
	var categoryText = $('question_category_id_temp').options[$('question_category_id_temp').options.selectedIndex].text;
	var levelText = $('question_level_id_temp').options[$('question_level_id_temp').options.selectedIndex].text;

	content = content.replace(/question_level_id_remove_id/,"question_level_id"+questionRowID);
	content = content.replace(/question_category_id_remove_id/,"question_category_id"+questionRowID);
	content = content.replace(/question_count_id_remove_id/,"question_count_id"+questionRowID);
	var key = $('question_category_id_temp').value+$('question_level_id_temp').value ;
	if(addedQuestionArray[key] == "added"){
		alert("Similar category and level questions already Added");
		return;
	}
	else{
		addedQuestionArray[key]="added";
	}
	totalMarks = parseInt($('totalMarks').value)+ parseInt(levelMarksMap[$('question_level_id_temp').value]* $('numberOfQuestion').value);	
	$('totalMarks').value = totalMarks;
	content = content.replace(/Category/,categoryText);
	content = content.replace(/QuestionLevel/,levelText);
	content = content.replace(/NumberOfQuestion/,$('numberOfQuestion').value);
	content = content.replace(/questionRowData/,"1");
	<logic:equal name="examForm" property="screen_type" value="">
	$('examList').style.display = "";	
	</logic:equal>
	content = content.replace(/<TBODY>/i,"");
	content = content.replace(/<\/TBODY>/i,"");
	questionRowID++;
	$(obj.id).insert({after:content});	
	enableDisableMultiple(questionRowID);

}
function removeRow(obj){	
	var key = $('question_category_id'+obj.id).value+$('question_level_id'+obj.id).value ;
	addedQuestionArray[key] = "";
	totalMarks = parseInt($('totalMarks').value) -  parseInt(levelMarksMap[$('question_level_id'+obj.id).value]* $('question_count_id'+obj.id).value);
	$(obj.id).up(1).remove();
	questionRowID--;
	enableDisableMultiple(questionRowID);
	$('totalMarks').value = totalMarks;
}
function fnSubmit()
{
	if($('exam_name').value.strip() == ""){
		alert('Exam Name is Mandatory');
		return false;
	}
	if(examNameExist){
		alert("Please enter Unique Exam Name");
		return;
	}
	if($('exam_time_hr').value.strip() == "0" && $('exam_time_min').value.strip() == "0"){
		alert('Exam Duration is mandatory');
		return;
	}
	var pattern = /^[1-9]([0-9]*)$/;
	if(!pattern.test($('passing_marks').value)){
		alert("Please enter Numeric value for passing marks");
		$('passing_marks').focus();
		return;
	}
	if(parseInt($('passing_marks').value)> parseInt($('totalMarks').value))
	{
		alert("Passing marks should be less then Total Marks");
		return;
	}
	if(questionRowID==1){
		alert("Please Add Questions in Exam using Add button");
		return;
	}
	$('questionRowData').innerHTML="";
	document.examForm.action='/createExam.do?';
	document.examForm.submit();
}

function fnUpdate()
{
	$('questionRowData').innerHTML="";
	if(questionRowID==1){
		alert("Please Add Questions in Exam using Add button");
		return;
	}
	document.examForm.screen_type.value="Edit";
	document.examForm.action='/updateExam.do?';
	document.examForm.submit();
}
function checkNegative(isMultipleEnable){
	if(isMultipleEnable== 0){
		$('negative_enable_temp').disabled = false;
	}else{
		$('negative_enable_temp').disabled = true;
		$('negative_enable_temp').value = "0";
		$('negative_enable').value = "0";
	}
	$('multiple_choice_enable').value = isMultipleEnable;
	availableQuestion();
}
function setNegative(isNegativeEnable){
	$('negative_enable').value = isNegativeEnable;
	if(isNegativeEnable==1){
		$('multiple_choice_enable_temp').disabled = true;
		$('multiple_choice_enable').value = "0";
		$('multiple_choice_enable_temp').value = "0";
	}else{
		$('multiple_choice_enable_temp').disabled = false;
	}
}
function enableDisableMultiple(questionRowID){
	if(questionRowID > 1){
		$('multiple_choice_enable_temp').disabled = true;
		$('negative_enable_temp').disabled = true;
	}else{
		$('multiple_choice_enable_temp').disabled = false;	
		if($('negative_enable').value=="1"){
			$('negative_enable_temp').disabled = false;
		}
	}
	
}
</script>
<html:form action="/exam" enctype="multipart/form-data">
	<html:hidden property="screen_type"/>
	<html:hidden property="exam_id"/>
	<html:hidden property="is_updatable" />
	<%String linktab = (String)request.getAttribute("selectedTab"); %>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<%if("CREATE".equalsIgnoreCase(linktab)) {%>
    <td class="activeTabc1"></td>
    <td class="activeTabbg"><a href="<%=request.getAttribute("createLink")%>">Create</a></td>
    <td class="activeTabc2"></td>
	<%} else {%>
	<td class="inactiveTabc1"></td>
    <td class="inactiveTabbg"><a href="<%=request.getAttribute("createLink")%>">Create</a></td>
    <td class="inactiveTabc2"></td>
	<%}%>
    <td class="spacer"></td>
	<%if("EDIT".equalsIgnoreCase(linktab)) {%>
	<td class="activeTabc1"></td>
    <td class="activeTabbg"><a href="<%=request.getAttribute("editLink")%>">Edit</a></td>
    <td class="activeTabc2"></td>
	<%} else{%>
    <td class="inactiveTabc1"></td>
    <td class="inactiveTabbg"><a href="<%=request.getAttribute("editLink")%>">Edit</a></td>
    <td class="inactiveTabc2"></td>
	<%}%>
    <td class="spacer"></td>
	<%if("VIEW".equalsIgnoreCase(linktab)) {%>
	<td class="activeTabc1"></td>
    <td class="activeTabbg"><a href="<%=request.getAttribute("viewLink")%>">View</a></td>
    <td class="activeTabc2"></td>
	<%} else{%>
    <td class="inactiveTabc1"></td>
    <td class="inactiveTabbg"><a href="<%=request.getAttribute("viewLink")%>">View</a></td>
    <td class="inactiveTabc2"></td> 
	<%}%>
  </tr>
</table></td>
  </tr>
  <tr>
    <td class="formbg" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><table width="100%" border="0" cellspacing="4" cellpadding="0">
  <tr>
    <td>&nbsp;</td>
	<logic:equal name="examForm" property="screen_type" value="Edit">
		<logic:equal name="examForm" property="is_updatable" value="false"><td class="heading1">(Not Updatable)</td></logic:equal>
		<logic:notEqual name="examForm" property="is_updatable" value="false"><td>&nbsp;</td></logic:notEqual>
	</logic:equal>	
	<logic:notEqual name="examForm" property="screen_type" value="Edit">
	<td>&nbsp;</td>
    </logic:notEqual>	
    <td>&nbsp;</td>
	<td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="6"><jsp:include page="showErrorMessage.jsp" /></td>
	
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td class="formText">Name <font class="asterix">*</font></td>
    <td ><logic:equal name="examForm" property="screen_type" value="">
							<input type="text" maxlength="30" name="exam_name" id="exam_name" class="form1" value='<bean:write name="examForm" property="exam_name"/>' onblur="javascript:isNameExist();"/><div id="examNameId" class="errorMsg" style="display:none;" ></div>
						</logic:equal>
						<logic:equal name="examForm" property="screen_type" value="View">
							<input type="text" maxlength="30" name="exam_name" id="exam_name" class="form1"
							value='<bean:write name="examForm" property="exam_name"/>' />
						</logic:equal>
						<logic:equal name="examForm" property="screen_type" value="Edit">
							<input type="text" maxlength="30" name="exam_name" id="exam_name" class="form1"
							value='<bean:write name="examForm" property="exam_name"/>' readonly="readonly" />
						</logic:equal></td>
    <td class="formText">Description</td>
    <td><html:textarea property="exam_description" styleId="exam_description" styleClass="form2"/></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td class="formText">Passing Marks <font class="asterix">*</font></td>
    <td ><input type="text" maxlength="3" name="passing_marks" id="passing_marks" class="form1"
						value='<bean:write name="examForm" property="passing_marks"/>'/></td>
    <td class="formText">Duration(Hr:Min)<font class="asterix">*</font></td>
    <td><span class="form4"><html:select styleId="exam_time_hr" property="exam_time_hr" >
								<html:option value="0">00</html:option>
								<html:option value="1">01</html:option>
								<html:option value="2">02</html:option>
								<html:option value="3">03</html:option>
								<html:option value="4">04</html:option>
								<html:option value="5">05</html:option>
								<html:option value="6">06</html:option>
							</html:select>
							<html:select  styleId="exam_time_min" property="exam_time_min" >
								<html:option value="0">00</html:option>
								<html:option value="5">05</html:option>
								<html:option value="10">10</html:option>
								<html:option value="15">15</html:option>
								<html:option value="20">20</html:option>
								<html:option value="25">25</html:option>
								<html:option value="30">30</html:option>
								<html:option value="35">35</html:option>
								<html:option value="40">40</html:option>
								<html:option value="45">45</html:option>
								<html:option value="50">50</html:option>
								<html:option value="55">55</html:option>
							</html:select></span></td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
	<td class="formText">Multiple Choice</td>
    <td><select Class="form2" name="multiple_choice_enable_temp" id="multiple_choice_enable_temp" onclick="checkNegative(this.value)" onchange="checkNegative(this.value)" >
			<option value="0">Disable</option>
			<option value="1">Enable</option>
		</select>
		<html:hidden property="multiple_choice_enable" styleId="multiple_choice_enable" value="0"/></td>
        <td class="formText">Negative Marking</td>
    <td><select Class="form2" name="negative_enable_temp" id="negative_enable_temp" onclick="setNegative(this.value)" onchange="setNegative(this.value)">
			<option value="0">Disable</option>
			<option value="1">Enable</option>
		</select>
		<html:hidden  property="negative_enable" styleId="negative_enable" value="0"/>
		</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
	<td>&nbsp;</td>
  	<td class="formText">Status</td>
    <td><label>
      <html:select styleClass="form2" property="status" styleId="status" >
			<html:option value="2">Active</html:option>
			<html:option value="3">InActive</html:option>
		</html:select>
    </label></td>
	<td class="formText">Total Marks</td>
    <td><html:text  name="examForm" property="totalMarks" styleId="totalMarks"  readonly="true" styleClass="form1"/></td>
    <td colspan="3">&nbsp;</td>
  </tr>
   <tr>
    <td colspan="6">&nbsp;</td>
	</tr>
  <tr>
    <td>&nbsp;</td>
	
    <td colspan="4"  width="100%">    
	<table  border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td class="formText" colspan="3"><strong>Question Category</strong></td>
	  </tr>
      <tr>
        <td class="innerBoxCorner1"></td>
        <td bgcolor="#a4a3a7"></td>
        <td class="innerBoxCorner2"></td>
      </tr>
      <tr>
        <td bgcolor="#a4a3a7"></td>
        <td><table width="100%" border="0" bgcolor="#a4a3a7" cellspacing="0" cellpadding="0">	  
	  <tr>
		<td><table width="100%" border="0" cellspacing="4" cellpadding="0">
		  <tr>
			<td class="formText"><div align="center">Category</div></td>
			<td class="formText"><div align="center">Question Level</div></td>
			<td class="formText"><div align="center">No. of Question</div></td>
			<td class="formText"><div align="center">Max. Question</div></td>
		  </tr>
		  <tr>
			<td><select name="question_category_id_temp"  id="question_category_id_temp" Class="form2" onclick= "javascript:availableQuestion();" onblur="javascript:availableQuestion();">
			<option value="">--Please Select--</option>
			<logic:present name="examForm" property="categories">
			<logic:iterate name="examForm" property="categories" id="category" >
			<bean:define id="dID" name="category" property="id" />
			<option  value="<%=dID.toString()%>"><bean:write name="category" property="name"/></option>						
			</logic:iterate>
			</logic:present>	
		</select></td>
			<td><select name="question_level_id_temp" id="question_level_id_temp" class="form2" onclick= "javascript:availableQuestion();" onblur="javascript:availableQuestion();">
			<option value="">--Please Select--</option>
			<logic:present name="examForm" property="levels">
			<logic:iterate name="examForm" property="levels" id="level" >
			<bean:define id="dID" name="level" property="id" />
			<option  value="<%=dID.toString()%>"><bean:write name="level" property="name"/></option>	
			<script language="JavaScript">
			levelMarksMap[<%=dID.toString()%>]= <bean:write name="level" property="positiveMark"/>;
			</script>
			</logic:iterate>
			</logic:present>	
		</select></td>
			<td><input type="text" name="numberOfQuestion" id="numberOfQuestion" class="form1"/></td>
			<td><input type="text" name="maxQuestion" id="maxQuestion" class="form1" readonly="true"/></td>
		  </tr>
		  <tr>
		  <logic:equal name="examForm" property="is_updatable" value="true">
        <td colspan="4" align="center"><input type="button" class="imageButton" id="addQuestionButton" value="Add" onClick="javascript:addRow($('refRow'))"></td>
		</logic:equal>
        
        
      </tr>
    </table></td>

  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td width="100%">
	<logic:notEqual name="examForm" property="screen_type" value="">		
							<table  width="100%" border="0"   cellspacing="0" cellpadding="0" cellpadding="0"  class="innerTable" id="examList" >	
							<tr id="refRow">
								<td  width="25"></td>
								<td class="formText">Category</td>
								<td class="formText">Question Level</td>
								<td class="formText">Number of question</td>
							  </tr>  
							<% int index=1;%>
							<logic:iterate name="examForm" property="examCategoryLevelMappingList" id="examCategoryLevelMappingVO" >
							<tr >					
								
								<logic:equal name="examForm" property="is_updatable" value="true">
								<td class="upperLine">
								<img id="<%=index%>" src="images/removeIcon.gif" onClick="javascript:removeRow(this);"/></td></logic:equal> 
								<logic:notEqual name="examForm" property="is_updatable" value="true">
								<td class="upperLine" width="25">&nbsp;</td>
								</logic:notEqual>
								<td class="upperLine"><bean:write name="examCategoryLevelMappingVO" property="categoryType.name"/></td>
								<td class="upperLine"> <bean:write name="examCategoryLevelMappingVO" property="levelType.name"/></td>
								<td class="upperLine" ><bean:write name="examCategoryLevelMappingVO" property="numberQuestions"/></td>
								<input type="hidden" name="question_category_id" id="question_category_id<%=index%>" value="<bean:write name="examCategoryLevelMappingVO" property="categoryType.id"/>">
								<input type="hidden" name="question_level_id" id="question_level_id<%=index%>" value="<bean:write name="examCategoryLevelMappingVO" property="levelType.id"/>">
								<input type="hidden" name="question_count" id="question_count_id<%=index%>" value="<bean:write name="examCategoryLevelMappingVO" property="numberQuestions"/>">
								<script language="javascript">
									addedQuestionArray[<bean:write name="examCategoryLevelMappingVO" property="categoryType.id"/><bean:write name="examCategoryLevelMappingVO" property="levelType.id"/>]= "added" ;
									questionRowID++;
								</script>

							</tr>
							<%index++;%>
							</logic:iterate>							
						</table>
						</td>
					</tr>
	</logic:notEqual>
	<logic:equal name="examForm" property="screen_type" value="">
	<table width="100%" border="0" cellspacing="0" class="innerTable" cellpadding="0" id="examList"  style="display:none;">
      <tr id="refRow">
        <td width="25">&nbsp;</td>
        <td class="formText">Category</td>
        <td class="formText">Question Level</td>
        <td class="formText">Number of question</td>
      </tr>     
    </table>
	</logic:equal></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</td>
        <td bgcolor="#a4a3a7"></td>
      </tr>
      <tr>
        <td class="innerBoxCorner4"></td>
        <td bgcolor="#a4a3a7"></td>
        <td class="innerBoxCorner3"></td>
      </tr>
    </table>
    
    </td>
    
    
    
    <td>&nbsp;</td>
  </tr>
  <tr>
  </tr>
</table>
</td>
  </tr>
  <tr>
    <td width="100%"><table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="lowerCorner1"></td>
        <td class="lowerbg"><div align="center"><logic:equal name="examForm" property="screen_type" value="Edit">
							
								<input type="button" class="imageButton" value="Update" onClick="javascript:fnUpdate()">
							
						</logic:equal>
						<logic:equal name="examForm" property="screen_type" value="">
							<input type="button" class="imageButton" value="Submit" onClick="javascript:fnSubmit()">
							
						</logic:equal>
                        </div></td>
        <td class="lowerCorner2"></td>
      </tr>
    </table></td>
  </tr>
  
  
  
</table>

</td>
  </tr>
  <tr>
    <td>&nbsp; </td>
  </tr>
</table>
	
	<table width="100%" border="0" cellspacing="0" cellpadding="0"  id="questionRow" style="display:none;">
	<tr>
							<td class="upperLine"><img id="rowId" src="images/removeIcon.gif" onClick="javascript:removeRow(this);"/></td><td class="upperLine"> Category</td><td class="upperLine"> QuestionLevel</td><td class="upperLine">NumberOfQuestion
							<div id="questionRowData">
							<input type="hidden" name="question_category_id" id="question_category_id_remove_id" value="categoryValue">
							<input type="hidden" name="question_level_id" id="question_level_id_remove_id" value="levelValue">
							<input type="hidden" name="question_count" id="question_count_id_remove_id" value="questionCount">
							</div>
							</td>
						</tr>
						</table>
	
	<logic:equal name="examForm" property="screen_type" value="View">
		<script language="JavaScript">	
			var elements = document.forms[0].elements;
			var type = "";
			for(j=0;j<elements.length;j++){
				type = elements[j].type;
				if(type == 'text' || type == 'select-one' || type == 'radio' || type == 'checkbox' || type == 'button' || type == 'textarea') {
					elements[j].disabled=true;
				}
			}
		</script>
	</logic:equal>
	<logic:equal name="examForm" property="is_updatable" value="false">
		<script language="JavaScript">	
		$('exam_name').readonly = true;
		$('exam_description').readonly = true;
		$('exam_time_hr').disabled = true;
		$('exam_time_min').disabled = true;
		$('multiple_choice_enable_temp').disabled = true;
		$('negative_enable_temp').disabled = true;		
		</script>
	</logic:equal>
</html:form>